<!-- 首页 -->
<template>
    <view class="home-wrap u-m-b-20" v-show="userInfo.password" style="background: #f8f8f8 url('../../static/images/user/top_bg.png') no-repeat;background-size: 100%;">
        <shopro-navbar :isBack="false" :background="{background:'url(\'../../static/images/user/top_bg.png\') no-repeat','background-size': '100% 100%'}">
        <text
                slot="content"
                style="color: #000; width: 100%; text-align: left;padding-left: 20rpx;"
            >
            </text>
        </shopro-navbar>
        <!--        轮播图-->

        <view class="userinfo u-flex u-row-left u-col-center u-p-20 u-m-l-20 u-m-r-20" @click="jump('/pages/user/userInfo')">

            <view class="userimg u-m-r-20">
                <image :src="require('@/static/images/user/touxiang.png')" style="width: 120rpx;height: 120rpx;border-radius: 50%"></image>
            </view>
            <view class="u-flex u-flex-col u-row-left u-w-100s u-col-center">
                <view class="u-flex u-w-100s">
                    <view class="nicknae u-m-r-10">{{userInfo.nickname}}</view>
                    <view class="phone">{{userInfo.mobile}}</view>
                </view>
                <view class="gongsi u-w-100s">所属公司:</view>
            </view>
        </view>
        <view class="u-flex u-flex-col u-m-t-20 kehu-item  u-p-20">
            <view class="swipers">
                <u-swiper :height="280" borderRadius="20" :list="goodsInfo.images" indicator-pos="bottomRight" mode="number" :interval="3000"></u-swiper>
            </view>
        </view>
        <view class="content-box u-p-20 u-m-l-20 u-m-r-20">
            <!--            我的工作台-->
            <view class="u-flex u-flex-col">

                <view class="u-flex u-flex-col u-p-10 u-w-100s u-p-b-20">
                    <view class="u-flex u-row-between u-col-center list u-w-100s" @tap="jump('/pages/user/yinsi')">
                        <view class="u-flex">
                            <view class="topnum u-m-r-20">
                                <image src="/static/images/user/yinsi.png"></image>
                            </view>
                            <view class="topname">隐私协议</view>
                        </view>
                        <view class="right-arrow">
                            <image src="/static/images/user/rightArrow.png"></image>
                        </view>
                    </view>
                    <view class="u-flex u-row-between u-col-center list u-w-100s" @tap="jump('/pages/user/userxieyi')">
                        <view class="u-flex">
                            <view class="topnum u-m-r-20">
                                <image src="/static/images/user/yonghuxieyi.png"></image>
                            </view>
                            <view class="topname">用户协议</view>
                        </view>
                        <view class="right-arrow">
                            <image src="/static/images/user/rightArrow.png"></image>
                        </view>

                    </view>

                    <view class="u-flex u-row-between u-col-center list u-w-100s" @click="logout">
                        <view class="u-flex">
                            <view class="topnum u-m-r-20">
                                <image src="/static/images/user/logout.png"></image>
                            </view>
                            <view class="topname">退出</view>
                        </view>
                        <view class="right-arrow">
                            <image src="/static/images/user/rightArrow.png"></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!--                退出提示-->
        <shopro-tishi-popup ref="deletpopupAddress" @sure="loginOut()"></shopro-tishi-popup>

    </view>
</template>

<script>

import {mapMutations, mapActions, mapState, mapGetters} from 'vuex';

export default {
    components: {},
    data() {
        return {
            userInfo: {},
            goodsInfo: {
                images: [require('@/static/images/lunbo1.jpg'), require('@/static/images/lunbo2.jpg')]
            },
        };
    },
    computed: {
        ...mapGetters(['isLogin']),

    },
    onPullDownRefresh() {

    },

    onShow() {
        this.init()
    },
    onHide() {

    },
    onLoad() {
        this.init()
    },
    methods: {
        logout(){
            this.$refs.deletpopupAddress.$refs.deletpopup.open()
        },
        // 初始化
        init() {
            let that = this;
            that
                .$http(
                    "login.userInfo",
                    "加载中..."
                )
                .then(res => {
                    if (res.code === 1) {
                        that.userInfo = res.data.userinfo;
                        that.$store.dispatch("setRole", this.userInfo.group_id);
                    }
                });
        },
        denglu() {
            this.$store.dispatch("showAuthModal", "1233");
        },
        // 路由跳转
        jump(path, parmas) {
            this.$Router.push({
                path : path,
                query: parmas
            });
        },
        loginOut() {
            let that = this;
            that.$http('login.logout', {
            }).then(res => {
                if (res.code === 1) {
                    that.$u.toast('退出成功')
                }
            });
            that.$store.dispatch("logout");
            that.$store.dispatch("showAuthModal", "1233");
        }
    }
};
</script>

<style lang="scss" scoped>
.home-wrap {
    min-height: 100vh;
}

.kehu-item {
    border-radius: 20rpx;
    width: 100%;
    .swipers{
        width: 100%;
    }
}
.content-box{
    background: #FFFFFF;
    border-radius: 30rpx;
    .list{
        height: 120rpx;
        border-bottom: 2rpx solid #E5E5E5;
        .topnum{
            width: 50rpx;
            height: 50rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
    }
    .right-arrow{
        width: 26rpx;
        height: 38rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
    .topnum{
        width: 60rpx;
        height: 60rpx;
    }
}
.baobiao-item {
    .time-day {
        width: 100rpx;
        background: #1989fa;
        color: #fff;
        padding: 6rpx 8rpx;
    }

    .time-month {
        width: 100rpx;
        background: #fff;
        border-radius: 10rpx;
        color: #1989fa;
        padding: 6rpx 8rpx;
    }
}

.top-yuangong {
    flex-wrap: wrap;
}

.top-yuangong > .list {
    width: 24%;
}

.top-yuangong > .list:not(:nth-child(4n)) {
    margin-right: calc(4% / 3);
}
</style>
